<template>
  <div class="app-container">
    <h3 style="margin-left: 300px" v-text="task.name" center></h3>
    <el-form ref="form" label-width="200px">
      <template v-for="item in formProperties">
        <el-form-item
          v-if="item.type == 'boolean'"
          :label="item.name"
          :key="item.id"
        >
          <el-radio v-model="item.val" label="是">是</el-radio>
          <el-radio v-model="item.val" label="否">否</el-radio>
        </el-form-item>

        <el-form-item
          :label="item.name"
          :key="item.id"
          v-else-if="item.type == 'time'"
        >
          <el-date-picker
            v-model="item.val"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          :label="item.name"
          :key="item.id"
          v-else-if="item.type == 'txtarea'"
        >
          <el-input type="textarea" :rows="2" v-model="item.val"> </el-input>
        </el-form-item>

        <el-form-item
          :label="item.name"
          :key="item.id"
          v-else-if="item.type == 'sysUser'"
        >
          <el-select v-model="item.val" filterable placeholder="请选择">
            <el-option
              v-for="item in users"
              :key="item.accountId"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          :label="item.name"
          :key="item.id"
          v-else-if="item.type == 'muslSysUser'"
        >
          <el-select
            v-model="item.val"
            multiple
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in users"
              :key="item.accountId"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="item.name" :key="item.id" v-else>
          <el-input v-model="item.val"></el-input>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')"> 提交 </el-button>
        <el-button @click="onCancel"> 取消 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { procList, BASEURL, form, taskComplete } from '@/api/workflow'
import { all } from '@/api/users'
import { UserModule } from '@/store/modules/user'

@Component({
  name: 'proc-form'
})
export default class extends Vue {
  private formProperties: any = []
  private users: any = []
  private task: any = {}
  async created() {
    //获取表单属性
    var { data } = await form(this.$route.query.id)
    data.form.forEach((it: any) => {
      if (it.type == 'boolean') {
        if (!it.val) it.val = '否'
        else it.val = '是'
      }
    })
    this.formProperties = data.form

    this.task = data.task
    //用户列表
    this.allusers()
  }
  //获取所有用户
  private async allusers() {
    const { data } = await all({})
    this.users = data.rows
    
  }
  private validatePass() {
    var ls: any[] = []
    this.formProperties.forEach((it: any) => {
      if (it.required && !it.val) {
        ls.push('<p>' + it.name + ':不能为空' + '</p>')
      }
    })
    return ls
  }
  private rules = {
    pass: [{ validator: this.validatePass, trigger: 'blur' }]
  }
  /**
   * 提交任务
   */
  private async onSubmit(formName: string) {
    var ls: any[] = this.validatePass()
    if (ls.length > 0) {
      this.$message({
        message: ls.join(''),
        type: 'error',
        dangerouslyUseHTMLString: true
      })

      return
    }

    var comploteData=JSON.parse(JSON.stringify(this.formProperties));
    comploteData.forEach((it: any) => {
      if (it.val instanceof Array) {
        it.val = it.val.join(',')
      }
    })

    const { data } = await taskComplete({
      taskId: this.$route.query.id,
      taskName: this.task.name,
      instid: this.task.instid,
      form: comploteData,
      userId: UserModule.name
    })

    this.$router.push({
      path: '/workflow/myflow'
    })
  }

  private onCancel() {
    this.$router.go(-1)
  }
}
</script>
<style scoped>
img,
object,
embed {
  max-width: 100%;
  height: 100%;
}
</style>
